<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>Horizontal menu Page</title>

  <link href="css/style.css" rel="stylesheet">
  <link href="css/style-responsive.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body class="horizontal-menu-page">





<section>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">
<!--                    <img src="images/logo.png" alt="">-->
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li ><a href="index.html">关于我们</a></li>
                    <li class="active"><a href="#">使用帮助</a></li>
<!--                    <li class="dropdown">-->
<!--                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">UI Kits <b class="caret"></b></a>-->
<!--                        <ul class="dropdown-menu">-->
<!--                            <li><a href="#">General</a></li>-->
<!--                            <li><a href="#">Buttons</a></li>-->
<!--                            <li><a href="#">Widget</a></li>-->
<!--                            <li><a href="#">Slider</a></li>-->
<!--                            <li><a href="#">Many More</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
                    <li><a href="#">推荐</a></li>
<!--                    <li class="dropdown">-->
<!--                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Form Components <b class="caret"></b></a>-->
<!--                        <ul class="dropdown-menu">-->
<!--                            <li><a href="#">Form Elements</a></li>-->
<!--                            <li><a href="#">Advanced Components</a></li>-->
<!--                            <li><a href="#">Form Wizard</a></li>-->
<!--                            <li><a href="#">Form Validation</a></li>-->
<!--                            <li><a href="#">Dropzone</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                        </form>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img alt="" src="images/photos/user-avatar.png" > <span th:text="${session.loginUser.getUserName()}"/> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Settings</a></li>
                            <li><a href="#">Log Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


    <!-- page heading start-->
    <div class="page-heading">
        <h3>
            寻   咖
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="#">主 界 面</a>
            </li>
            <li class="active"> 大 浏 览 </li>
        </ul>
    </div>
    <!-- page heading end-->

    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <header class="panel-heading">
                        展示
                        <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                    </header>
                    <div class="panel-body">


                        <div id="gallery" class="media-gal">
                            <div class="images item " th:each="coff,stat:${page.records}">

                                <a th:href="@{/detail(id=${coff.getId()})}">
<!--                                    src="images/gallery/cafe.jpg"-->
                                    <img th:src="${'images/gallery/'+coff.getImg()}" alt="" />
                                </a>
                                <p th:text="${coff.getSname()}">img01.jpg </p>
                                <p >平均消费:[[${coff.getSprice()}]] 元/人 </p>
                            </div>

                            <!--                                <div class=" audio item " >-->
                            <!--                                    <a href="#myModal">-->
                            <!--                                        <img src="images/gallery/image2.jpg" alt="" />-->
                            <!--                                    </a>-->
                            <!--                                    <p>img02.jpg </p>-->
                            <!--                                </div>-->

                        </div>
                        <div class="col-md-12 text-center clearfix">
                            <div class="span6">
                                <div class="dataTables_info" id="hidden-table-info_info">当前第 [[${page.getCurrent()}]] 页,共 [[${page.getPages()}]] 页,共 [[${page.getTotal()}]]
                                    条记录
                                </div>
                            </div>
                            <div class="span6">
                                <ul class="pagination">
                                    <li ><a th:href="@{/gallery(pn=${page.getCurrent()-1})}">← Previous</a></li>
                                    <li th:class="${num == page.getCurrent()? 'active':''}" th:each="num:${#numbers.sequence(1,page.getPages())}"><a th:href="@{/gallery(pn=${num})}">[[${num}]]</a></li>
                                    <li ><a th:href="@{/gallery(pn=${page.getCurrent()+1})}">Next → </a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Edit Media Gallery</h4>
                                    </div>

                                    <div class="modal-body row">

                                        <div class="col-md-5 img-modal">
                                            <img src="images/gallery/image1.jpg" alt="">
                                            <a href="#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> Edit Image</a>
                                            <a href="#" class="btn btn-white btn-sm"><i class="fa fa-eye"></i> View Full Size</a>

                                            <p class="mtop10"><strong>File Name:</strong> img01.jpg</p>
                                            <p><strong>File Type:</strong> jpg</p>
                                            <p><strong>Resolution:</strong> 300x2000</p>
                                            <p><strong>Uploaded By:</strong> <a href="#">ThemeBucket</a></p>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label> Name</label>
                                                <input id="name" value="img01.jpg" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label> Tittle Text</label>
                                                <input id="title" value="awesome image" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label> Description</label>
                                                <textarea rows="2" class="form-control"></textarea>
                                            </div>
                                            <div class="form-group">
                                                <label> Link URL</label>
                                                <input id="link" value="images/gallery/img01.jpg" class="form-control">
                                            </div>
                                            <div class="pull-right">
                                                <button class="btn btn-danger btn-sm" type="button">Delete</button>
                                                <button class="btn btn-success btn-sm" type="button">Save changes</button>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- modal -->

                    </div>
                </section>
            </div>
        </div>
    </div>
    <!--body wrapper end-->

    <!--footer section start-->
    <footer>
        2021 &copy; 寻咖 by 我们
    </footer>
    <!--footer section end-->

</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

</body>
</html>
